<template>
  <div>
    <!--右边主页面区域-->
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills">
            <!-- 编程式导航 -->
            <!-- <li
              :class="{ active: $route.path == item.path }"
              v-for="item in navList"
              :key="item.id"
              @click="goto(item.path)"
            >
              <a href="javascript:;">{{ item.title }}</a>
            </li> -->

            <!-- 声明式导航 -->
            <router-link
              v-for="item in navList"
              :key="item.id"
              tag="li"
              :to="item.path"
              active-class="active"
              ><a href="javascript:;">{{ item.title }}</a></router-link
            >
            <!-- <li><a href="#">科技</a></li> -->
          </ul>
        </nav>
        <hr />
      </div>

      <!-- 二级路由出口 -->
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          id: 1,
          title: "体育",
          path: "/news/sport"
        },
        {
          id: 2,
          title: "科技",
          path: "/news/tec"
        }
      ]
    };
  },

  components: {},

  methods: {
    goto(path) {
      this.$router.push(path); //页面跳转
    }
  }
};
</script>

<style scoped>
</style>